<template>
  <div class="baseBox">
    <div>
      <div class="box">
        <ul v-if="isDisplay">
          <li v-for="(ipAddr, index) in arrIpAddrs" @click="getUse($event)" :key="index">{{
            ipAddr
          }}</li>
        </ul>
      </div>
      <div class="box">
        <ul v-if="isUseDisplay">
          <li @click="getCameraState(ipvalue, $event)">获取红外相机状态</li>
          <li @click="contactCamera(ipvalue, $event)">对红外相机执行通电操作</li>
          <li @click="poweroffCamera(ipvalue, $event)">对红外相机进行断电操作</li>
          <li @click="lsMedia(ipvalue, $event)">列出SD卡根目录下所有文件目录</li>
          <li @click="listFilesDetail(ipvalue, $event)">列出SD卡对应路径文件的详细信息</li>
        </ul>
      </div>
      <div class="box">{{ targetip }}{{ reqstatus }}<br />红外相机状态：{{ resData }}</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      isadd: "",
      ipAddr: "",
      ipAddrvalue: "",
      isArrdsDisplay: false,
      isUseDisplay: false,
      arrIpAddrs: [],
      resData: "",
      isDisplay: false,
      ipvalue: "",
      targetip: "",
      reqstatus: ""
    }
  },
  props: {

  },
  methods: {
    getUse($event) {
      this.isUseDisplay = true;
      this.ipvalue = $event.target.innerText;

      // 1. 获取dom元素
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("firstback-color");
      }
      $event.target.classList.add("firstback-color");
      console.log(this.ipvalue);
      this.targetip = this.ipvalue;
    },
    getCameraState(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      axios({
        method: 'get',
        url: `http://${url}:8888/get_camera_state`,

      }).then((res) => {
        this.resData = res.data
      }).catch(err => {
        this.resData = `请求失败${err}`;
      })
    },
    contactCamera(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      axios({
        method: 'post',
        url: `http://${url}:8080/contact_camera`,

      }).then((res) => {
        this.resData = res.data
      }).catch(err => {
        this.resData = `请求失败${err}`;
      })
    },
    poweroffCamera(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      axios({
        method: 'get',
        url: `http://${url}:8080/poweroff_camera`,

      }).then((res) => {
        this.resData = res.data
      }).catch(err => {
        this.resData = `请求失败${err}`;
      })
    },
    lsMedia(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      axios({
        method: 'get',
        url: `http://${url}:8080/ls_media`,

      }).then((res) => {
        this.resData = res.data
      }).catch(err => {
        this.resData = `请求失败${err}`;
      })
    },
    listFilesDetail(url, $event) {
      let allLis = document.querySelectorAll('li');
      for (let i = 0; i < allLis.length; i++) {
        allLis[i].classList.remove("secback-color");
      }
      $event.target.classList.add("secback-color");
      axios({
        method: 'get',
        url: `http://${url}:8080/list_files_detail`,

      }).then((res) => {
        this.resData = res.data
      }).catch(err => {
        this.resData = `请求失败${err}`;
      })
    }
  },
  created() {

    axios({
      method: 'get',
      url: "http://192.168.103.50:8888/getallipaddr",

    }).then((res) => {
      this.reqstatus = "请求成功";
      this.arrIpAddrs = res.data.split(",");
      this.isDisplay = true;
    }).catch(err => {
      this.reqstatus = `请求失败${err}`;
    })
  }
}

</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.baseBox {
  width: 100vw;
  height: 100vh;
}

li {
  list-style-type: none;
  font-size: 20px;
  background-color: white;
}

.box {
  float: left;
  width: 33vw;
  height: 75vh;
  border: 1px solid;
  overflow: auto;
}

.firstback-color {
  background-color: orangered;
}

.secback-color {
  background-color: orangered;
}
</style>
